/**************************************************
创建事件
* */
<template>
  <div class="mod-config">
    <basic-container>

      <!--头部 流程走势图-->
      <headDailyExnamine :sign="{ a: true, b: false, c: false,d: false,e: false,f: false}"></headDailyExnamine>
      <div v-if="showZhong==1" class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="标题">
                <el-input v-model="searchForm.sjbt" placeholder="标题" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="searchForm.sjdesc" placeholder="描述" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <el-select

                  v-model="searchForm.khzq"
                  placeholder="请选择周期"
                  class="xiaLa"
                  style="width: 100%"
                  allow-create
                  default-first-option
                  :clearable="true"
                  filterable
                  @change.native="selectBlur"
                  @blur.native="selectBlur"

                >
                  <el-option
                    v-for="(item, index) in kezqsList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>


                <el-button
                  v-if="permissions.rckhsjkh_view"
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList()"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="mt10" style="overflow:hidden">
          <div style="display:flex;justify-content:space-between;height: 50px; border-bottom: 1px solid #b0bde2">
            <div >

              <el-tooltip
                class="item"
                effect="dark"
                content="人员/机构新增"
                placement="top"
                v-model="isShow"
              >
                <el-button
                  icon="el-icon-plus"
                  type="primary"
                  v-if="permissions.rckhsjkh_add"
                  @click="addOrUpdateHandle()"
                  circle
                ></el-button>
              </el-tooltip>

              <!--    <el-tooltip
                    class="item"
                    effect="dark"
                    content="机构新增"
                    placement="top"

                  >
                    <el-button
                      icon="el-icon-plus"
                      type="success"
                      v-if="permissions.rckhsjkh_add"
                      @click="addOrUpdateHandle()"
                      circle
                    ></el-button>
                  </el-tooltip>-->
              <el-tooltip
                class="item"
                effect="dark"
                content="批量删除选中的事件"
                placement="top"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  v-if="permissions.rckhsjkh_del"
                  :disabled="canDelete"
                  @click="deleteBatch()"
                  circle
                ></el-button>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="下载《专项工作使用说明书》" placement="top-start">
                 <el-link icon="el-icon-download" @click="exportXlsx" type="primary" >使用说明</el-link>
               </el-tooltip>-->

            </div>


            <div>
              <!-- <el-popover
                 placement="top-start"
                 width="200"
                 trigger="hover"
                 style="margin:0 5px 0 5px"
                 content="审核关系和评价关系后才可提交审核。"
               >-->
              <el-tooltip class="item" effect="dark" content="流程提交" placement="top-start">
                <div>
                  <el-button
                    v-if="permissions.rckhsjkh_prosub"
                    type="primary"
                    :disabled="canSubmit"
                    @click="submitEvaluateList"
                  >提交审核</el-button>
                </div>
              </el-tooltip>
              <!-- </el-popover>-->
            </div>
          </div>
        </div>

        <div class="flex">
          <div class="mt10">
            事件考核
            <span>
                <el-radio v-model="radio" label="1">人员</el-radio>
                <el-radio v-model="radio" label="2">机构</el-radio>
              </span>

          </div>
        </div>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
          v-if="rednermsg"
          @cell-click="unfoldBtn"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" :index="indexMethod" width="80" align="center" label="序号"></el-table-column>
          <el-table-column prop="sjbt" align="center" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sjdesc" align="center" min-width="100" label="描述"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="khdxs" align="center" min-width="100" label="考核对象" >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.khdxs.split(',')"
                  >{{ item }}<br
                  /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.khdxs).slice(
                    0,
                    2
                  )"
                :key="index"
              >
                <el-badge
                  :value="cutout(scope.row.khdxs).length"
                  :max="9"
                  v-if="
                      cutout(scope.row.khdxs).length > 2 && index === 0
                    "
                  class="itembadge"
                >
                  <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="khzq" align="center" min-width="100" label="考核周期"  show-overflow-tooltip>
           <!-- <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <span v-if="scope.row.bmkhzqId == 1">2022年1月</span>
                <span v-if="scope.row.bmkhzqId == 2">2022年2月</span>
                <span v-if="scope.row.bmkhzqId == 3">2022年3月</span>
                <span v-if="scope.row.bmkhzqId == 4">2022年4月</span>
                <span v-if="scope.row.bmkhzqId == 5">2022年5月</span>
                <span v-if="scope.row.bmkhzqId == 6">2022年6月</span>
                <span v-if="scope.row.bmkhzqId == 7">2022年7月</span>
                <span v-if="scope.row.bmkhzqId == 8">2022年8月</span>
                <span v-if="scope.row.bmkhzqId == 9">2022年9月</span>
                <span v-if="scope.row.bmkhzqId == 10">2022年10月</span>
                <span v-if="scope.row.bmkhzqId == 11">2022年11月</span>
                <span v-if="scope.row.bmkhzqId == 12">2022年12月</span>
              </div>
            </template>-->

          </el-table-column>

          <el-table-column prop="createTime" align="center" min-width="120" label="创建时间"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" align="center" min-width="100" label="状态"  show-overflow-tooltip>
            <!-- <template slot-scope="scope">
               <span>{{scope.row.status |transState}}</span>
             </template>-->
            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <span slot="reference">{{scope.row.status |transState}}</span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.proceId,scope.row)"
                  >流程跟踪</el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" width="240" fixed="right" label="操作">

            <template slot-scope="scope">
              <el-button
                v-if="permissions.rckhsjkh_view"
                type="primary"
                plain
                size="small"
                @click="dataView(scope.row)"
              >查看</el-button>
              <el-button
                v-if="permissions.rckhsjkh_edit&&(scope.row.status==1||scope.row.status==3)"
                type="primary"
                plain
                size="small"
                @click="addOrUpdateHandle(scope.row)"
              >修改</el-button>


            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
      <el-dialog :visible.sync="showPicDialog" title="流程图" width="100%">
        <div>
          <el-row>
            <el-col :span="12">
              <el-image
                v-if="showPicDialog"
                :headers="headers"
                :src="actPicUrl"
                :preview-src-list="actPicUrlList"
                width="100%"
                class="bg"
              ></el-image>
            </el-col>
            <el-col :span="12">
              <el-table :data="hisTableData" border style="width: 100%">
                <el-table-column prop="taskId" label="任务ID" width="100"></el-table-column>
                <el-table-column prop="processInstanceId" label="流程实例ID" width="100"></el-table-column>
                <el-table-column prop="taskName" label="任务名称"></el-table-column>
                <el-table-column prop="assignee" label="处理人">
                  <template slot-scope="scope">
                    <span
                      v-if="
                        scope.row.taskName == '部门绩效考核联络员任务填报'&& scope.row.flag
                      "
                    >
                      {{ scope.row.assignee
                      }}
                      <i
                        style="
                          margin-left: 5px;
                          color: #1a71fb;
                          cursor: pointer;
                        "
                        @click="showUserNd(scope.row)"
                        class="el-icon-edit-outline"
                      ></i>
                    </span>
                    <span v-else-if="scope.row.flag">
                      {{ scope.row.assignee }}
                      <i
                        style="
                          margin-left: 5px;
                          color: #1a71fb;
                          cursor: pointer;
                        "
                        @click="showUser(scope.row.taskId)"
                        class="el-icon-edit-outline"
                      ></i>
                    </span>

                    <span v-else>{{ scope.row.assignee }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="start" label="开始时间"></el-table-column>
                <el-table-column prop="end" label="结束时间"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 人员-->
      <addAndUpdate
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        :dialogTitle="dialogTitle"
        @refreshDataList="getDataList"
        @refreash="refreashdata"
        @closeDialog="closeDialog"
      ></addAndUpdate>

      <!-- 弹窗, 新增 / 修改 机构-->
      <addAndUpdateJg
        v-if="addOrUpdateJgVisible"
        ref="addOrUpdateJg"
        :dialogTitle="dialogTitle"
        @refreshJgDataList="getDataList"
        @refreashJg="refreashdata"
        @closeJgDialog="closeJgDialog"
      ></addAndUpdateJg>
      <UserCommonSelectTask v-if="usercommentTask" ref="userTask" @submitfy="submitfyTask"></UserCommonSelectTask>
      <detailView v-if="detailVisible" ref="detailNode"   :dialogTitle="dialogTitle" @closeDialog="closeDialog1"></detailView>
      <detailJgView v-if="detailJgVisible" ref="detailJgNode"   :dialogTitle="dialogTitle" @closeDialog="closeJgDialog1"></detailJgView>
      <processTracking
        ref="processTracking"
        @processTrackingChildren="getDataList"
      ></processTracking>
    </basic-container>
  </div>
</template>

<script>
    import addAndUpdate from "@/views/dailyExamine/eventExamine/createEvent/addAndUpdate";
    import addAndUpdateJg from "@/views/dailyExamine/eventExamine/createEvent/addAndUpdateJg";

    import detailView from "@/views/dailyExamine/eventExamine/createEvent/detailView";
    import detailJgView from "@/views/dailyExamine/eventExamine/createEvent/detailJgView";
    import UserCommonSelectTask from "@/views/dailyExamine/components/usercomment-select-task";
    import processTracking from "@/views/dailyExamine/components/processTracking";

    // 接口 api
    import {
        eventList,
        deleteEvent,
        submitAudit,
        getNextTaskUser,
        getOpenKhzq,
        getKhzqSelect,
        changeAss
    } from "@/api/dailyExamine/eventExamine/event.js";
    import { mapGetters, mapState } from "vuex";
    import { showMessage } from "@/api/activiti/task";
    import store from "@/store";
    export default {
        components: {
            detailView,
            detailJgView,
            addAndUpdate,
            addAndUpdateJg,
            changeAss,
            UserCommonSelectTask,
            processTracking
        },
        data() {
            return {
                headers: {
                    Authorization: "Bearer " + store.getters.access_token
                },
                detailVisible: false,//人员
                detailJgVisible:false,//机构
                searchForm: {}, //查询表单
                canDelete: true, // 删除表格数据的禁用
                multipleSelection: [], //表格中被选中的数据
                dialogTitle: "新增",
                showZhong: 1,
                dataList: [],
                radio: "1",
                lctj:"",
                //new
                hisTableData: [],
                actPicUrlList: [],
                actPicUrl: "",
                showPicDialog: false,
                usercommentTask: false,
                goSpVisible: false,
                kezqsList: [],
                isShow:true,
                dataListLoading: false,
                addOrUpdateVisible: false,
                addOrUpdateJgVisible:false,
                searchadvanced: true,
                searchheight: "0",
                zxshformref: {},
                zxid: Number,
                /*pageIndex: null,
                pageSize: null,
                totalPage: null,
                //new----------
                page: {
                  currentPage: 1,
                  pageSize: 10
                },*/
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                evaluationList: [],
                canSubmit: true,
                showLd:'',
                rednermsg: true,
            };
        },
        filters: {
            transState(val) {
                switch (val) {
                    case 1:
                        return "起草中";
                        break;
                    case 2:
                        return "审核中";
                        break;
                    case 3:
                        return "审核驳回";
                        break;
                    case 4:
                        return "评审中";
                        break;
                    case 5:
                        return "确认中";
                        break;
                    case 10:
                        return "已完成";
                        break;
                }
            }
        },
        computed: {
            ...mapGetters(["permissions"])

        },
        watch: {
            radio(value) {
                if (value) {
                    this.dataList = [];
                    this.getDataList();
                }
            },
            showZhong(value, oldval) {
                if (value !== oldval) {
                    this.getDataList();
                }
            }
        },
        created() {
            this.getDataList();
            this.getKhzq();//考核周期

        },
        methods: {
            selectBlur(e) {
                this.searchForm.khzq = e.target.value
            },
            //考核对象展示
            unfoldBtn(row) {
                row.rowshows = !row.rowshows;
                this.rednermsg = false;
                this.$nextTick(() => {
                    this.rednermsg = true;
                });
            },
            //获取考核周期列表
            getKhzq(){
                getKhzqSelect().then(r => {

                    r.data.data.forEach((ele) => {
                        let item = {
                            name:ele.period,
                            value:ele.id
                        }
                        //this.khzq = ele.period
                        this.kezqsList.push(item)
                    });
                });

            },
            // 批量提交审核
            submitEvaluateList() {
                if (this.multipleSelection.length == 0) {
                    this.$message.warning("请先选择数据");
                }else{
                    let ids = this.multipleSelection.map(it => {
                        return it.id;
                    });

                    getNextTaskUser(ids.toString()).then(r => {

                        this.$confirm(r.data.msg, "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            submitAudit(ids.toString()).then(r => {
                                if (r.data.code == 0) {
                                    this.$message.success("操作成功");
                                    this.endLineVisible = false;
                                    this.getDataList();
                                } else {
                                    this.$message.error(r.data.msg);
                                    this.endLineVisible = false;
                                    this.getDataList();
                                }
                            });
                        });
                    });

                }
            },
            //数组
            cutout(cellValue) {
                if (!cellValue) return []
                if (cellValue) {
                    var c = cellValue.split(",");
                    if (c.size < 1) {
                        c.push("-");
                        c.push("-");
                    } else if (c.size < 2) {
                        c.push("-");
                    }
                    return c ;
                }
            },
            // 查看
            dataView(row) {
                this.dialogTitle = "查看";
                if(this.radio == 1) {//人员
                    this.detailVisible = true;
                    this.$nextTick(() => {
                        this.$refs.detailNode.init(row);
                    });
                }
                if(this.radio == 2) {//机构
                    this.detailJgVisible = true;
                    this.$nextTick(() => {
                        this.$refs.detailJgNode.init(row);
                    });
                }


            },

            // 勾选数据
            handleSelectionChange(val) {
                let isDelete = val.every(it => {
                    return it.status == 1 || it.status == 3 ;
                });
                let isSubmit = val.every(it => {
                    return it.status == 1 || it.status == 3 ;
                });
                if (val.length == 0) {
                    this.canSubmit = true;
                    this.canDelete = true;
                } else {
                    if (isDelete) {
                        this.canDelete = false;
                    } else {
                        this.canDelete = true;
                    }
                    if (isSubmit) {
                        this.canSubmit = false;
                    } else {
                        this.canSubmit = true;
                    }
                }
                this.multipleSelection = val;
            },
            // 查询条件的展开关闭
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            },
            // 更新数据
            refreashdata(data) {
                if (data == 1) {
                    this.getDataList();
                }
            },
            //新增与编辑 人员/机构
            addOrUpdateHandle(obj) {

                if (obj != undefined) {
                    this.dialogTitle = "编辑";
                } else {
                    this.dialogTitle = "新增";
                }
                if(this.radio == 1){//人员
                    this.addOrUpdateVisible = true;
                    this.$nextTick(() => {
                        this.$refs.addOrUpdate.init(obj);
                    });
                }
                if(this.radio == 2){//机构
                    this.addOrUpdateJgVisible = true;
                    this.$nextTick(() => {
                        this.$refs.addOrUpdateJg.init(obj);
                    });
                }

            },
            /* //新增与编辑 机构
             addOrUpdateHandleJg(obj) {
                 this.addOrUpdateJgVisible = true;
                 if (obj != undefined) {
                     this.dialogTitle = "编辑";
                 } else {
                     this.dialogTitle = "新增";
                 }

             },*/
            //删除数据
            deleteBatch(){
                this.$confirm("此操作将删除选中的数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let ids = this.multipleSelection.map(it => {
                            return it.id;
                        });
                        deleteEvent(ids.toString()).then(r => {
                            if (r.data.code == 0) {
                                this.$message.success("删除成功");
                                this.getDataList();
                            } else {
                                this.$message.error(r.data.msg);
                                this.getDataList();
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            // 获取数据列表
             getDataList() {
                this.dataListLoading = true;
                let khtype = "";
                if(this.radio == 1){
                    khtype = 'ry';
                }
                if(this.radio == 2){
                    khtype = 'jg';
                }
            /*    getKhzqSelect().then(r => {

                  const res =  r.data.data.filter(it => it.period == this.searchForm.bmkhzqId);
                  if(res.length > 0){
                      res.map(it =>{

                          this.searchForm.bmkhzqId = it.id

                      })

                  }
                });*/
                eventList(
                    Object.assign(
                        {
                            current: this.pageIndex, //当前页
                            size: this.pageSize, // 每页条数
                            khtype:khtype
                        },
                        this.searchForm,
                    )
                    )
                    .then(response => {
                        this.dataList = response.data.data.records;

                        console.log("this.dataList:",this.dataList)

                        this.totalPage = response.data.data.total;
                        this.dataListLoading = false;
                        this.dataList.forEach((ele) => {
                            ele.rowshows = true;
                        });

                    })
                    .catch(() => {
                        this.dataListLoading = false;
                    });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 关闭弹窗
            closeDialog() {
                this.addOrUpdateVisible = false;
            },
            closeJgDialog() {
                this.addOrUpdateJgVisible = false;
            },
            closeDialog1() {
                this.detailVisible = false;
            },
            closeJgDialog1() {
                this.detailJgVisible = false;
            },
            // 显示用户
            showUser(taskId) {
                this.taskId = taskId;
                this.usercommentTask = true;
                this.$nextTick(() => {
                    this.$refs.userTask.init("", "zxshr", JSON.stringify([]), "htcj");
                });
            },
            // 提交任务
            submitfyTask(data) {
                if (data.tableDataUser.length != 1) {
                    this.$message.closeAll();
                    this.$message.error("请指定唯一的审批人");
                } else {
                    changeAss({
                        taskId: this.taskId,
                        userId: data.tableDataUser[0].userId
                    }).then(res => {
                        this.$message.closeAll();
                        this.$message.success("审批人更换成功");
                        this.showPicDialog = false;
                        this.getDataList();
                    });
                }
            },
            // 显示信息
            /*showMessage(proId) {
                showMessage(proId).then(res => {
                    this.hisTableData = res.data.data;
                });
                this.actPicUrl = `/act/sp/view/` + proId;
                this.actPicUrlList = [];
                this.actPicUrlList.push(`/act/sp/view/` + proId);
                this.showPicDialog = true;
            },*/
            // 显示信息
            showMessage(proId,row) {
                //console.log(row);
                this.$refs.processTracking.init(proId);
            },

            indexMethod(index) { //修改table表索引

                return (this.pageIndex-1)*this.pageSize+index+1;
            }
            // 表格中state对应状态，前面是真实状态，后面为页面展示状态
            // 0 待创建审核关系    起草中
            // 1 待创建评价关系    起草中
            // 2 专项工作填报中  	待提交
            // 3 专项工作审核中    已提交
            // 5 专项工作审核驳回   审核驳回
            // 6 专项工作确认中     工作确认
            // 7 专项工作填报中     履约中
            // 8 专项工作评分中      评分中
            // 80 待评分            待评分
            // 81 评分完成          评分完成
            // 82 驳回后重新评分     评分退回
            // 9  专项工作结果汇总    结果汇总----提交审批  0r----结束流程
            // 10 专项工作考核员审核    待评审----结束流程
            // 11 流程结束      流程结束
        },

    };
</script>

<style lang="scss" scoped>
  /deep/.el-table__header-wrapper .el-checkbox {
    display: none;
  }
  .el-table__header-wrapper .el-checkbox {
    display: none;
  }

  /deep/.el-icon-download:before{font-size: 30px!important}
  /deep/.el-divider__text, .el-link {font-size: 14px!important;}
  /deep/.el-link [class*=el-icon-]+span{margin-left: 0px!important;}
  /deep/.el-button+.el-button{margin-right: 10px!important;}
</style>
